<script lang="ts" setup>
import {CustomerClass} from "@/Game/Customer";
import {ShopType2Instance} from "@/Game/Shop";
import colors from "vuetify/util/colors";
import {useAppStore} from "@/stores/app";

const appStore = useAppStore();

const {customer} = defineProps<{
    customer: CustomerClass,
    enabled: boolean,
    selected: boolean
}>();

const destinations = customer.Destinations.map(item => ShopType2Instance[item]);

function GetRandomColorString(): string {
    let temp = Object.values(colors);
    let temp2 = Object.values(temp[Math.floor(Math.random() * temp.length)]);
    return temp2[Math.floor(Math.random() * temp2.length)];
}

const randomColor = GetRandomColorString();
</script>

<template>
    <v-card :color="randomColor" :hover="enabled" :link="enabled" :style="{transform: selected ? 'translateX(50%)' : undefined}">
        <template v-slot:append>
            {{customer.Consumption}}🍽️
        </template>
        <template v-slot:title>
            <span>{{customer.Name}}</span> <span v-if="!appStore.wideScreen && customer.Fund > 0" style="font-size: 1rem; letter-spacing: -0.2rem;"><template v-for="item in customer.Fund" :key="item">🪙</template>
            </span>
        </template>
        <v-card-text style="height: calc(100% - 3.25rem); padding-bottom: 0.75rem; display: flex; flex-direction: column;">
            <div v-if="appStore.wideScreen" style="display: flex; flex-direction: column; justify-content: space-between; height: 100%;">
            <span v-if="customer.Fund > 0">拥有：
                <span style="font-size: 1.2rem;"><template v-for="item in customer.Fund" :key="item">🪙</template></span>
                <v-tooltip activator="parent" location="bottom start">招待此客人将获得 {{customer.Fund}} 两钱。</v-tooltip>
            </span>
                <div v-html="customer.Description"/>
                <div style="display: flex; gap: 0.5rem; justify-self: end;">
                    <v-avatar v-for="item in destinations" :color="item.Color" size="38" style="font-size: 1.2rem;">
                        {{item.Icon}}
                        <v-tooltip activator="parent" location="bottom start">{{item.Name}}</v-tooltip>
                    </v-avatar>
                </div>
            </div>
            <v-chip v-else color="var(--color)" rounded style="font-size: 1.2rem; width: fit-content; margin-top: 1rem; align-self: center;">
                <template v-for="item in destinations">{{item.Icon}}</template>
            </v-chip>
        </v-card-text>
    </v-card>
</template>